<template>
  <!-- 完整HTML结构 -->
  <div class="container">
    <!-- 选项卡区域 -->
    <div class="tabs-header">
      <van-tabs
        v-model:active="showTab"
        title-active-color="#000"
        color="#000"
        title-inactive-color="#999"
        @click-tab="handelShowTab"
        shrink
      >
        <van-tab v-for="(item, index) in headerList" :name="parseInt(item.dictValue)" :key="index">
          <template #title>
            <div v-if="item.status==0" class="tab-title"> {{ _t18(item.dictLabel) }}</div>
          </template>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 币种列表 -->
    <div class="currency-list">
      <template v-if="showTab === 1">
        <!-- 轮播图 -->
        <div v-if="!props.showAll" class="carousel-banner">
          <img
            src="https://besteth.oss-cn-hongkong.aliyuncs.com/b97b34778e64409c9c5ba1f6bf03bb88png"
            alt="banner"
          />
        </div>
        <!-- 轮播图 END -->
        <SectionHeader v-if="!props.showAll" :title="headerList[1]?.dictLabel" />
        <CurrencyCardList :list="topCurrencyList" :tab-index="showTab"/> 
        <div v-if="!props.showAll && 1==0">
          <div class="ai-bottom-tab">
            <div
              v-for="(item, idx) in aiTabList"
              :key="item.key"
              class="tab-btn"
              :class="{ 'tab-btn-active': aiTabIndex === idx }"
              @click="aiTabIndex = idx"
            >
              {{ item.label }}
            </div>
          </div>
          <!-- AI外匯跟投：二级菜单和卡片 -->
          <div v-if="aiTabIndex === 0" class="ai-sub-tab-van">
            <van-tabs
              v-model:active="aiSubTabIndex"
              line-width="30"
              line-height="3"
              color="#111"
              title-active-color="#111"
              title-inactive-color="#999"
              shrink
            >
              <van-tab v-for="(item, idx) in aiSubTabList" :key="item.key" :title="item.label">
                <!-- 渲染假数据卡片 -->
                <div class="ai-card-list">
                  <div v-for="(card, i) in aiCardList" :key="i" class="ai-card-item" @click="goToAiFollowDetail" style="cursor: pointer;">
                    <img class="ai-card-avatar" :src="card.avatar" alt="avatar" />
                    <div class="ai-card-info">
                      <div class="ai-card-name">{{ card.name }}</div>
                      <div class="ai-card-desc">{{ card.desc }}</div>
                      <div class="ai-card-profit-label">
                        年平均收益
                        <span :style="{ color: card.profitColor, fontWeight: 600 }">{{
                          card.profit
                        }}</span>
                      </div>
                    </div>
                    <img class="ai-card-arrow" :src="rightArrowIcon" alt="arrow" />
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <!-- AI外汇预测：直接展示列表，无二级菜单 -->
          <AIPredictList v-if="aiTabIndex === 1" :list="aiPredictList" @itemClick="handleAIPredictClick" />
        </div>
        
        <!--  -->
      </template>

      <template v-if="showTab === 2">
        <!-- 轮播图 -->
        <div v-if="!props.showAll" class="carousel-banner">
          <img
            src="https://besteth.oss-cn-hongkong.aliyuncs.com/b97b34778e64409c9c5ba1f6bf03bb88png"
            alt="banner"
          />
        </div>
        <!-- 轮播图 END -->
        <SectionHeader v-if="!props.showAll" :title="headerList[0]?.dictLabel" />
        <CurrencyCardList :list="topCurrencyList"  :tab-index="showTab"/>
        
        <CustomTabsBlock
          v-if="!props.showAll"
          v-model="customTabIndex"
          :tabs="customTabs"
          :aiQuantList="aiQuantList"
          ai-quant-main-icon="/static/img/zIO_fc482b0e_j1z.1db64704.png"
          :ai-quant-title="t('ai_quant_title')"
          :ai-quant-subtitle="t('ai_quant_subtitle')"
          :ai-quant-apply-text="t('ai_quant_apply')"
          :arbitrage-list="arbitrageList"
          arbitrage-rate-up-icon="/static/images-ai/cHb_86f23530_Ecq.svg"
          arbitrage-rate-down-icon="/static/images-ai/V28_37739625_Pvd.svg"
          :arbitrage-volume-text="t('arbitrage_24h_volume')"
          :arbitrage-fluctuation-text="t('arbitrage_fluctuation')"
          :arbitrage-buy-price-text="t('arbitrage_buy_price')"
          :arbitrage-btn-text="t('arbitrage_btn')"
          :market-list="mockCurrencyList"
          @arbitrageAction="arbitrageAction"
        >
          <template #currency-card-list>
            <CurrencyCardList :list="mockCurrencyList" />
          </template>
        </CustomTabsBlock>
        <div
          v-if="props.showAll && 1==0"
          style="background: #fff; border-radius: 12px; padding: 12px 0; margin-top: 12px"
        >
          <CurrencyItem
            v-for="(item, index) in mockCurrencyList"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div>
      </template>

      <template v-if="showTab === 3">
        <!-- 轮播图 -->
        <div v-if="!props.showAll" class="carousel-banner">
          <img
            src="https://besteth.oss-cn-hongkong.aliyuncs.com/b97b34778e64409c9c5ba1f6bf03bb88png"
            alt="banner"
          />
        </div>
        <!-- 轮播图 END -->
        <SectionHeader v-if="!props.showAll" :title="headerList[3]?.dictLabel" />
        <CurrencyCardList :list="topCurrencyList" :tab-index="showTab" />
        <!-- <div class="currency-list-item" >
          <TestCurrencyItem
            v-for="(item, index) in currentCoinList2.slice(0, 4)"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div> -->
        <div
          v-if="props.showAll && 1==0"
          style="background: #fff; border-radius: 12px; padding: 12px 0; margin-top: 12px"
        >
          <CurrencyItem
            v-for="(item, index) in mockCurrencyList"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div>
        <div v-if="!props.showAll && 1==0">
          <!-- 底部tab切换 -->
          <div class="ai-bottom-tab">
            <div
              v-for="(item, idx) in aiTabList"
              :key="item.key"
              class="tab-btn"
              :class="{ 'tab-btn-active': aiTabIndex === idx }"
              @click="aiTabIndex = idx"
            >
              {{ item.label }}
            </div>
          </div>
          <!-- AI外匯跟投：二级菜单和卡片 -->
          <div v-if="aiTabIndex === 0" class="ai-sub-tab-van">
            <van-tabs
              v-model:active="aiSubTabIndex"
              line-width="30"
              line-height="3"
              color="#111"
              title-active-color="#111"
              title-inactive-color="#999"
              shrink
            >
              <van-tab v-for="(item, idx) in aiSubTabList" :key="item.key" :title="item.label">
                <!-- 渲染假数据卡片 -->
                <div class="ai-card-list">
                  <div v-for="(card, i) in aiCardList" :key="i" class="ai-card-item" @click="goToAiFollowDetail" style="cursor: pointer;">
                    <img class="ai-card-avatar" :src="card.avatar" alt="avatar" />
                    <div class="ai-card-info">
                      <div class="ai-card-name">{{ card.name }}</div>
                      <div class="ai-card-desc">{{ card.desc }}</div>
                      <div class="ai-card-profit-label">
                        年平均收益
                        <span :style="{ color: card.profitColor, fontWeight: 600 }">{{
                          card.profit
                        }}</span>
                      </div>
                    </div>
                    <img class="ai-card-arrow" :src="rightArrowIcon" alt="arrow" />
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <!-- AI外汇预测：直接展示列表，无二级菜单 -->
          <AIPredictList v-if="aiTabIndex === 1" :list="aiPredictList" @itemClick="handleAIPredictClick" />
        </div>
      </template>

      <template v-if="showTab === 4">
        <!-- 轮播图 -->
        <div v-if="!props.showAll" class="carousel-banner">
          <img
            src="https://besteth.oss-cn-hongkong.aliyuncs.com/b97b34778e64409c9c5ba1f6bf03bb88png"
            alt="banner"
          />
        </div>
        <!-- 轮播图 END -->
        <SectionHeader v-if="!props.showAll" :title="headerList[2]?.dictLabel" />
        <CurrencyCardList :list="topCurrencyList" :tab-index="showTab" />
        <!-- <div class="currency-list-item" >
          <TestCurrencyItem
            v-for="(item, index) in currentCoinList2.slice(0, 4)"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div> -->
        <div
          v-if="props.showAll && 1==0"
          style="background: #fff; border-radius: 12px; padding: 12px 0; margin-top: 12px"
        >
          <CurrencyItem
            v-for="(item, index) in mockCurrencyList"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div>
        <div v-if="!props.showAll && 1==0">
          <!-- 底部tab切换 -->
        <div class="ai-bottom-tab">
          <div
            v-for="(item, idx) in aiTabList"
            :key="item.key"
            class="tab-btn"
            :class="{ 'tab-btn-active': aiTabIndex === idx }"
            @click="aiTabIndex = idx"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- AI外匯跟投：二级菜单和卡片 -->
        <div v-if="aiTabIndex === 0" class="ai-sub-tab-van">
          <van-tabs
            v-model:active="aiSubTabIndex"
            line-width="30"
            line-height="3"
            color="#111"
            title-active-color="#111"
            title-inactive-color="#999"
            shrink
          >
            <van-tab v-for="(item, idx) in aiSubTabList" :key="item.key" :title="item.label">
              <!-- 渲染假数据卡片 -->
              <div class="ai-card-list">
                <div v-for="(card, i) in aiCardList" :key="i" class="ai-card-item" @click="goToAiFollowDetail" style="cursor: pointer;">
                  <img class="ai-card-avatar" :src="card.avatar" alt="avatar" />
                  <div class="ai-card-info">
                    <div class="ai-card-name">{{ card.name }}</div>
                    <div class="ai-card-desc">{{ card.desc }}</div>
                    <div class="ai-card-profit-label">
                      年平均收益
                      <span :style="{ color: card.profitColor, fontWeight: 600 }">{{
                        card.profit
                      }}</span>
                    </div>
                  </div>
                  <img class="ai-card-arrow" :src="rightArrowIcon" alt="arrow" />
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <!-- AI外汇预测：直接展示列表，无二级菜单 -->
        <AIPredictList v-if="aiTabIndex === 1" :list="aiPredictList" @itemClick="handleAIPredictClick" />
        </div>
      </template>

      <template v-if="showTab === 5">
        <!-- 轮播图 -->
        <div v-if="!props.showAll" class="carousel-banner">
          <img
            src="https://besteth.oss-cn-hongkong.aliyuncs.com/b97b34778e64409c9c5ba1f6bf03bb88png"
            alt="banner"
          />
        </div>
        <!-- 轮播图 END -->
        <SectionHeader v-if="!props.showAll" :title="headerList[4]?.dictLabel" />
        <CurrencyCardList :list="topCurrencyList" :tab-index="showTab" />
        <!-- <div class="currency-list-item" >
          <TestCurrencyItem
            v-for="(item, index) in currentCoinList2.slice(0, 4)"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div> -->
        <div
          v-if="props.showAll && 1==0"
          style="background: #fff; border-radius: 12px; padding: 12px 0; margin-top: 12px"
        >
          <CurrencyItem
            v-for="(item, index) in mockCurrencyList"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div>
        <div v-if="!props.showAll && 1==0">
          <!-- 底部tab切换 -->
        <div class="ai-bottom-tab">
          <div
            v-for="(item, idx) in aiTabList"
            :key="item.key"
            class="tab-btn"
            :class="{ 'tab-btn-active': aiTabIndex === idx }"
            @click="aiTabIndex = idx"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- AI外匯跟投：二级菜单和卡片 -->
        <div v-if="aiTabIndex === 0" class="ai-sub-tab-van">
          <van-tabs
            v-model:active="aiSubTabIndex"
            line-width="30"
            line-height="3"
            color="#111"
            title-active-color="#111"
            title-inactive-color="#999"
            shrink
          >
            <van-tab v-for="(item, idx) in aiSubTabList" :key="item.key" :title="item.label">
              <!-- 渲染假数据卡片 -->
              <div class="ai-card-list">
                <div v-for="(card, i) in aiCardList" :key="i" class="ai-card-item" @click="goToAiFollowDetail" style="cursor: pointer;">
                  <img class="ai-card-avatar" :src="card.avatar" alt="avatar" />
                  <div class="ai-card-info">
                    <div class="ai-card-name">{{ card.name }}</div>
                    <div class="ai-card-desc">{{ card.desc }}</div>
                    <div class="ai-card-profit-label">
                      年平均收益
                      <span :style="{ color: card.profitColor, fontWeight: 600 }">{{
                        card.profit
                      }}</span>
                    </div>
                  </div>
                  <img class="ai-card-arrow" :src="rightArrowIcon" alt="arrow" />
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <!-- AI外汇预测：直接展示列表，无二级菜单 -->
        <AIPredictList v-if="aiTabIndex === 1" :list="aiPredictList" @itemClick="handleAIPredictClick" />
        </div>
      </template>

      <div
          v-if="props.showAll"
          style="background: #fff; border-radius: 12px; padding: 12px 0; margin-top: 12px"
        >
          <CurrencyItem
            v-for="(item, index) in mockCurrencyList"
            :key="index"
            :currency-item="item"
            @click="linkTo(item)"
          />
        </div>
    </div>
  </div>
</template>

<script setup>
// 完整JavaScript代码
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useTradeStore } from '@/store/trade'
import { useMainStore } from '@/store'
import { _t18 } from '@/utils/public'
import TestCurrencyItem from '@/components/CurrencyList/TestCurrencyItem.vue'
import CurrencyItem from '@/components/CurrencyList/currencyItem.vue'
import SectionHeader from './SectionHeader.vue'
import * as echarts from 'echarts'
import CurrencyCardList from './CurrencyCardList.vue'
import { useI18n } from 'vue-i18n'
import { reactive } from 'vue'
import CustomTabsBlock from './CustomTabsBlock.vue'
import AIPredictList from './AIPredictList.vue'
import { getFinancial } from '@/api/financial/index'
import { dict } from '@/api/common'

const props = defineProps({
  showAll: {
    type: Boolean,
    default: false
  }
})

const tradeStore = useTradeStore()
const mainStore = useMainStore()
const router = useRouter()
const { t } = useI18n()

const showTab = ref(['ebc'].includes(__config._APP_ENV) ? 1 : 0)
const customTabIndex = ref(0)
const customTabs = computed(() => [
  // t('ai_tab_quant'),
  // t('ai_tab_arbitrage'),
  t('ai_tab_contract'),
  t('ai_tab_option')
])

// const headerList = computed(() => [
//   { name: _t18('tab_crypto', ['latcoin']), show: true },
//   { name: _t18('tab_forex', ['latcoin']), show: true },
//   { name: _t18('tab_stock'), show: true },
//   { name: _t18('tab_metal'), show: true },
//   { name: _t18('tab_energy'), show: true }
// ])
const headerList = ref([])

const getDict = async () => {
  const res = await dict('t_second_coin_type')
  // console.log(res)
  if (res.code == '200') {
    // tabList.value = [...res.data.map(e => e.dictLabel)]
    
    headerList.value = res.data
    // headerList.value = res.data[0].dictCode
    // console.log(headerList.value)
  }
}
// getDict()
const currentCoinList0 = computed(() =>
  tradeStore.secondContractCoinList.filter((it) => it.coinType === 2)
)

const currentCoinList1 = computed(() =>
  tradeStore.secondContractCoinList.filter((it) => it.coinType === 1)
)

const currentCoinList2 = computed(() =>
  tradeStore.secondContractCoinList.filter((it) => it.coinType === 3)
)

const handelShowTab = (tab) => {
  console.log(tab)
  showTab.value = parseInt(tab.name)
  console.log(showTab.value)
  console.log(mockCurrencyList.value)
  //修改mack值
  // mockCurrencyList.value = tradeStore.secondContractCoinList.filter((it) => it.coinType == showTab.value)
  // console.log(mockCurrencyList.value)
  // console.log(currentCoinList0.value)
  // console.log(currentCoinList1.value)
  // if (tab == 1) {
  //   mockCurrencyList.value = currentCoinList0
  // } else if (tab == 2) {
  //   mockCurrencyList.value = currentCoinList1
  // } else if (tab == 3) {
  //   mockCurrencyList.value = currentCoinList2
  // }
  // mockCurrencyList.value.forEach(item => {
  //   item.chartData = genChartData(100, 20)
  // })
  
}

const linkTo = (item) => {
  router.push({
    path: '/quantContract',
    query: { id: item.id, symbol: item.coin }
  })
}

//const linkTo = (item) => {     原来的
 // const targetRoute = ['latcoin'].includes(__config._APP_ENV) ? '/tradeU' : '/trade'

 // mainStore.setTradeStatus(0)
  //router.push({
  //  path: targetRoute,
 //   query: { symbol: item.coin }
 // })
//}

// 自动生成大起伏走势的函数
function genChartData(base = 100, count = 20) {
  let arr = [base]
  for (let i = 1; i < count; i++) {
    let next = arr[i - 1] + (Math.random() - 0.5) * base * 0.7
    arr.push(Number(next.toFixed(2)))
  }
  return arr
}


const mockCurrencyList = computed(() =>
  tradeStore.secondContractCoinList.filter((it) => it.coinType === showTab.value)
    .map(item => ({
      ...item,
      chartData: genChartData(100, 20),
      line: genRandomPoints()
    }))
)

// 前四个币种列表，随 mockCurrencyList 变化自动更新
const topCurrencyList = computed(() => {
  return mockCurrencyList.value.slice(0, 4)
})

// mockCurrencyList.value.forEach(item => {
//   item.chartData = genChartData(100, 20)
//   item.line = genRandomPoints()
// })
console.log(mockCurrencyList.value)
function genRandomPoints(count = 20, width = 80, height = 32) {
  const step = width / (count - 1)
  let value = Math.random() * height
  const points = []

  for (let i = 0; i < count; i++) {
    // 模拟上下波动
    value += (Math.random() - 0.5) * (height / 5)
    // 限制在 0~height 范围内
    value = Math.min(Math.max(value, 0), height)
    points.push(`${i * step},${height - value}`)
  }

  return points.join(' ')
}

// const aiQuantList = [
//   {
//     icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/5024368d3a204f38b7fd037366ef74d8png',
//     name: 'ChatGPT04–Grid Trading',
//     days: 1,
//     rate: 0.15
//   },
//   {
//     icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/080909bd978242fd9141efe724ae1b95png',
//     name: 'ChatGPT03–Grid Trading',
//     days: 30,
//     rate: 2
//   },
//   {
//     icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/5024368d3a204f38b7fd037366ef74d8png',
//     name: 'ChatGPT02–Grid Trading',
//     days: 5,
//     rate: 0.3
//   },
//   {
//     icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/080909bd978242fd9141efe724ae1b95png',
//     name: 'ChatGPT01–Grid Trading',
//     days: 11,
//     rate: 0.5
//   }
// ]

// 示例数据
const aiQuantList = ref([])

const getInit = async () => {
  try {
    let data = {
    }
    // const res = await getFinancial(data)
    // if (res.code === 200) {
    //   aiQuantList.value = res.rows
    //   // listArray.value.length === 0 ? (isShow.value = true) : (isShow.value = false)
    // }
  } catch (error) {
    console.log(45)
  }
}

const arbitrageList = [
  {
    id: 1,
    icon: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/949bc8d1f5d1491d8f2d57e07cf553e2.png',
    title: 'Huobi',
    volume: '227348674.042065',
    rate: -0.34,
    price: '117228.732'
  },
  {
    id: 2,
    icon: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/949bc8d1f5d1491d8f2d57e07cf553e2.png',
    title: 'Binance',
    volume: '123456789.123456',
    rate: -0.12,
    price: '117000.000'
  },
  {
    id: 3,
    icon: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/949bc8d1f5d1491d8f2d57e07cf553e2.png',
    title: 'OKX',
    volume: '987654321.654321',
    rate: -0.56,
    price: '116800.888'
  }
]

const arbitrageStats = reactive({
  volume: '229253279.853152',
  rate: -0.54,
  price: '117076.034043'
})

function arbitrageAction(item) {
  // 这里可以做跳转、弹窗等
  alert('套利平台: ' + item.title)
}

const chartRefs = ref([])

function getPercentChange(item) {
  if (!item.amount || !item.open) return '0.00'
  return (((item.amount - item.open) / item.open) * 100).toFixed(2)
}
function getChangeUp(item) {
  return Number(getPercentChange(item)) >= 0
}
function getLineColor(item) {
  return getChangeUp(item) ? '#00b386' : '#ff4444'
}
function renderChart(idx, item) {
  const el = chartRefs.value[idx]
  if (!el) return
  let chart = echarts.getInstanceByDom(el)
  if (!chart) chart = echarts.init(el)
  const data = item.chartData // 直接用item里的数据
  chart.setOption({
    grid: { left: 0, right: 0, top: 12, bottom: 12 },
    xAxis: { type: 'category', show: false, data: data.map((_, i) => i) },
    yAxis: { type: 'value', show: false },
    series: [
      {
        data,
        type: 'line',
        smooth: false,
        symbol: 'none',
        lineStyle: { color: getLineColor(item), width: 2 }
      }
    ],
    animation: true
  })
}
onMounted(() => {
  getInit()
  getDict()
  nextTick(() => {
    
    mockCurrencyList.value.forEach((item, idx) => {
      renderChart(idx, item)
    })
  })
})

const marketList = [
  {
    id: 1,
    icon: 'https://assets.coingecko.com/coins/images/1/large/bitcoin.png',
    name: 'BTC',
    unit: 'USD',
    price: '118438.99',
    rate: -0.39,
    line: '0,28 10,20 20,10 30,16 40,12 50,18 60,16 70,14 80,16'
  },
  {
    id: 2,
    icon: 'https://assets.coingecko.com/coins/images/279/large/ethereum.png',
    name: 'ETH',
    unit: 'USD',
    price: '3848.12',
    rate: 0.25,
    line: '0,20 10,18 20,16 30,14 40,12 50,14 60,16 70,18 80,20'
  },
  {
    id: 3,
    icon: 'https://assets.coingecko.com/coins/images/44/large/xrp-symbol-white-128.png',
    name: 'XRP',
    unit: 'USD',
    price: '0.523',
    rate: -1.12,
    line: '0,16 10,18 20,20 30,22 40,24 50,22 60,20 70,18 80,16'
  }
]

// 底部tab切换
const aiTabIndex = ref(0)
const aiTabList = computed(() => {
  if (showTab.value === 2) {
    return [
      { label: t('ai_stock_follow'), key: 0 },
      { label: t('ai_stock_predict'), key: 1 }
    ]
  }
  if (showTab.value === 3) {
    return [
      { label: t('ai_metal_follow'), key: 0 },
      { label: t('ai_metal_predict'), key: 1 }
    ]
  }
  if (showTab.value === 4) {
    return [
      { label: t('ai_energy_follow'), key: 0 },
      { label: t('ai_energy_predict'), key: 1 }
    ]
  }
  return [
    { label: t('ai_follow'), key: 0 },
    { label: t('ai_predict'), key: 1 }
  ]
})

console.log(aiTabList.value)

// 二级tab切换
const aiSubTabIndex = ref(0)
const aiSubTabList = computed(() => {
  if (showTab.value === 3) {
    return [
      { label: t('all'), key: 0 },
      { label: t('investment_bank'), key: 2 },
      { label: t('famous_fund_manager'), key: 3 }
    ]
  }
  if (showTab.value === 4) {
    return [
      { label: t('all'), key: 0 },
      { label: t('investment_bank'), key: 2 },
      { label: t('famous_fund_manager'), key: 3 }
    ]
  }
  return [
    { label: t('all'), key: 0 },
    { label: t('ai_gpt'), key: 1 },
    { label: t('investment_bank'), key: 2 },
    { label: t('famous_fund_manager'), key: 3 }
  ]
})

// 不同二级tab的假数据
const aiCardDataMap = [
  [
    // 全部
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/cb73835b634d4b7da78bc8c6cac2d920png',
      name: '托馬斯·基恩',
      desc: 'Pernod Ricard S A Sp...',
      profit: '+45%',
      profitColor: '#19C37B'
    },
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/4a139599c4834e78a05fd5cc147a6583png',
      name: 'AI GPT',
      desc: 'GPT 產品組合',
      profit: '+58%',
      profitColor: '#19C37B'
    },
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/699536a9622c43a59864d0600a8d3d9dpng',
      name: '理查艾倫',
      desc: 'Blackrock, Inc. Comm...',
      profit: '+29%',
      profitColor: '#19C37B'
    },
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/cb73835b634d4b7da78bc8c6cac2d920png',
      name: '馬克斯·米勒',
      desc: 'Rac Opportunity Fund...',
      profit: '+23%',
      profitColor: '#19C37B'
    }
  ],
  [
    // AI GPT
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/4a139599c4834e78a05fd5cc147a6583png',
      name: 'AI GPT',
      desc: 'GPT 產品組合',
      profit: '+58%',
      profitColor: '#19C37B'
    },
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/4a139599c4834e78a05fd5cc147a6583png',
      name: 'AI GPT Pro',
      desc: 'AI智能投資組合',
      profit: '+61%',
      profitColor: '#19C37B'
    }
  ],
  [
    // 投行公司
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/cb73835b634d4b7da78bc8c6cac2d920png',
      name: '托馬斯·基恩',
      desc: 'Pernod Ricard S A Sp...',
      profit: '+45%',
      profitColor: '#19C37B'
    },
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/699536a9622c43a59864d0600a8d3d9dpng',
      name: '理查艾倫',
      desc: 'Blackrock, Inc. Comm...',
      profit: '+29%',
      profitColor: '#19C37B'
    }
  ],
  [
    // 知名基金經理
    {
      avatar: 'https://besteth.oss-cn-hongkong.aliyuncs.com/cb73835b634d4b7da78bc8c6cac2d920png',
      name: '馬克斯·米勒',
      desc: 'Rac Opportunity Fund...',
      profit: '+23%',
      profitColor: '#19C37B'
    }
  ]
]
const rightArrowIcon = '/static/img/4ZY_22b6bbab_9o2.ed4db12a.svg'

const aiCardList = computed(() => aiCardDataMap[aiSubTabIndex.value] || [])

// AI外汇预测假数据
const aiPredictList = [
  {
    icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/1498a8c5af4640cea8812c9781b42df2png',
    name: 'USDCHF 涨过',
    desc: '预测5天后上涨 39%',
    rate: '39%'
  },
  {
    icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/35c543fdd95242d2aa654998f9eb2f0cpng',
    name: 'AUDSGD 涨过',
    desc: '预测1天后上涨 45%',
    rate: '45%'
  },
  {
    icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/53deae9abd9145459e03bf75ef45abaepng',
    name: 'AUDCAD 涨过',
    desc: '预测4天后上涨 53%',
    rate: '53%'
  },
  {
    icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/35c543fdd95242d2aa654998f9eb2f0cpng',
    name: 'NZDUSD 涨过',
    desc: '预测5天后上涨 47%',
    rate: '47%'
  },
  {
    icon: 'https://besteth.oss-cn-hongkong.aliyuncs.com/1498a8c5af4640cea8812c9781b42df2png',
    name: 'USDPLN 涨过',
    desc: '预测5天后上涨 51%',
    rate: '51%'
  }
]
const upIcon = '/static/img/cHb_86f23530_Ecq.5b15710f.svg'

const goToAiFollowDetail = () => {
  router.push('/aiFollowDetail')
}

function handleAIPredictClick(item) {
  let tabIndex = 0
  if (showTab.value === 1) tabIndex = 3 // 外汇
  else if (showTab.value === 2) tabIndex = 0 // 股票
  else if (showTab.value === 3) tabIndex = 4 // 贵金属
  else if (showTab.value === 4) tabIndex = 5 // 能源
  router.push({
    path: '/aiForecastDetail',
    query: { tabIndex }
  })
}
</script>

<style lang="scss" scoped>
// 完整CSS代码
.container {
  /* 动态计算容器高度（100vh - 底部导航栏高度） */
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  .tabs-header {
    margin-top: 10px;
    :deep(.van-tabs__nav) {
      background: transparent !important;
    }
    :deep(.tab-title) {
      padding: 6px 3px;
      font-size: 14px !important;
      font-weight: 500;
      border-radius: 18px;
      transition: all 0.2s;
    }
    :deep(.van-tab--active) {
      font-weight: 600;
      font-size: 18px !important;
    }
  }
  .currency-list-item {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 一行 3 列 */
    gap: 20px; /* 列和行之间的间距 */
  }
  .currency-list {
    flex: 1;
    min-height: 0; /* 允许内容区域收缩 */
    overflow-y: auto;
    /* 增加底部安全间距（80px为底部导航高度） */
    padding: 12px 16px calc(80px + env(safe-area-inset-bottom));
    box-sizing: border-box;

    /* 滚动优化 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    ::v-deep(.currency-item) {
      background: #12161f;
      border-radius: 8px;
      margin-bottom: 8px;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > div:first-child {
        flex: 1;
        max-width: 60%;
      }

      > div:last-child {
        flex: none;
        text-align: right;
      }
    }
  }
}

.carousel-banner {
  width: 100%;
  margin: 0 auto 12px auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  img {
    width: 100%;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    min-height: 80px;
    background: #f5f5f5;
  }
}

/* 全局底部导航栏样式（需要与实际项目匹配） */
.global-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  /* 兼容全面屏设备 */
  padding-bottom: env(safe-area-inset-bottom);
  background: #1a1e25;
  z-index: 1000;
}

/* 删除与币种卡片相关的所有样式（如.currency-card-custom、.card-header-custom等） */

.ai-bottom-tab {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f6f7f9;
  gap: 12px;
}
.tab-btn {
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  padding: 10px;
  color: #111;
  transition: all 0.2s;
}
.tab-btn-active {
  background: #111;
  color: #fff;
}
.ai-sub-tab {
  display: flex;
  align-items: center;
  background: #f6f7f9;
  padding: 0 0 0 16px;
  gap: 24px;
  height: 40px;
}
.sub-tab-btn {
  font-size: 15px;
  font-weight: 600;
  color: #999;
  position: relative;
  cursor: pointer;
}
.sub-tab-btn-active {
  color: #111;
}
.sub-tab-underline {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: #111;
  border-radius: 2px;
}
.ai-sub-tab-van {
  :deep(.van-tabs__nav) {
    background: transparent;
  }
}
.ai-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0 0 0;
}
.ai-card-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 18px 18px 18px 14px;
  position: relative;
}
.ai-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 14px;
  background: #f5f5f5;
}
.ai-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-card-name {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-card-desc {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-card-profit-label {
  font-size: 14px;
  color: #222;
  margin-top: 2px;
}
.ai-card-arrow {
  width: 22px;
  height: 22px;
  margin-left: 10px;
}
</style>
